<template>
	<view class="tabs">
		<view @click="changeTab(index)" :class="['tabs-item',index==idx?'tab-act':'']" v-for="(item,index) in list" :key="item">
			{{item}}
		</view>
	</view>
</template>

<script>
export default {
	name:'tabs',
	props:{
		list:{
			type:Array,
			default:()=>{
				return [];
			}
		},
		idx:[String,Number]
	},
	data() {
		return {
				
		};
	},
	methods:{
		changeTab(idx) {
			this.$emit('change',idx);
		}
	}
};
</script>

<style lang="scss" scoped>
	.tabs{
		display: flex;
		align-items: center;
		&-item{
			display: flex;
			color: #999999;
			font-size: 24rpx;
			margin-right: 22rpx;
			padding:4rpx 1rpx;
			border-bottom:2rpx solid #fff ;
			transition: .3s all;
		}
		.tab-act{
			color: #333;
			font-weight: bold;
			border-bottom:2rpx solid #333 ;
		}
	}
</style>